<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:constants="http://www.tuanzi.com/constants/tags" xmlns:h="http://java.sun.com/jsf/html">

    <div class="ui-fluid">
        <div class="ui-g">
            <div class="ui-g-12">
                <div class="card ui-g-12">
                    <h3>基础信息</h3>
                    <p:panelGrid columns="4" layout="grid"
                                 columnClasses="ui-grid-col-1,ui-grid-col-5,ui-grid-col-1,ui-grid-col-5"
                                 styleClass="ui-panelgrid-blank"
                                 style="border:0px none; background-color:transparent;text-align:left;">
                        <p:outputLabel value="名称"></p:outputLabel>
                        <p:inputText disabled="#{loanApplicationExportInfoBean.isView()}"
                                     value="#{loanApplicationExportInfoBean.$.name}"/>

                        <p:outputLabel value="标题"><strong style="color: red">*</strong></p:outputLabel>
                        <p:inputText disabled="#{loanApplicationExportInfoBean.isView()}"
                                     value="#{loanApplicationExportInfoBean.$.title}"/>

                        <p:outputLabel value="副标题"/>
                        <p:inputText disabled="#{loanApplicationExportInfoBean.isView()}"
                                     value="#{loanApplicationExportInfoBean.$.subtitle}"/>

                        <p:outputLabel value="副标题2"/>
                        <p:inputText disabled="#{loanApplicationExportInfoBean.isView()}"
                                     value="#{loanApplicationExportInfoBean.$.subtitle2}"/>

                        <p:outputLabel value="平台"><strong style="color: red">*</strong></p:outputLabel>
                        <p:selectManyButton disabled="#{loanApplicationExportInfoBean.isView()}"
                                            value="#{loanApplicationExportInfoBean.$.selectedPlatforms}">
                            <f:selectItem itemLabel="ios" itemValue="ios"/>
                            <f:selectItem itemLabel="android" itemValue="android"/>
                        </p:selectManyButton>

                        <p:outputLabel value="所属组"><strong style="color: red">*</strong></p:outputLabel>
                        <p:selectOneMenu disabled="#{loanApplicationExportInfoBean.isView()}"
                                         value="#{loanApplicationExportInfoBean.$.exportGroupId}" filter="true">
                            <f:selectItem itemLabel="- 请选择 - " noSelectionOption="true"/>
                            <f:selectItems value="#{loanApplicationExportInfoBean.exportGroup}"/>
                            <p:ajax listener="#{loanApplicationExportInfoBean.onSelectExportGroup}" event="change" process="@this" update="replacePanel"></p:ajax>
                        </p:selectOneMenu>

                        <p:outputLabel value="位置"><strong style="color: red">*</strong></p:outputLabel>
                        <p:inputNumber disabled="#{loanApplicationExportInfoBean.isView()}"
                                       value="#{loanApplicationExportInfoBean.$.position}"
                                       decimalPlaces="0"/>

                        <p:outputLabel for="status" value="是否上线"><strong style="color: red">*</strong></p:outputLabel>
                        <p:selectOneButton id="status" disabled="#{loanApplicationExportInfoBean.isView()}"
                                           value="#{loanApplicationExportInfoBean.$.status}">
                            <f:selectItem itemValue="1" itemLabel="上线"/>
                            <f:selectItem itemValue="0" itemLabel="下线"/>
                        </p:selectOneButton>

                        <p:outputLabel value="版本限制"/>
                        <p:outputPanel>
                            <p:inputNumber disabled="#{loanApplicationExportInfoBean.isView()}"
                                           value="#{loanApplicationExportInfoBean.$.minVersionCode}"
                                           styleClass="autoWidthCalendar"
                                           decimalPlaces="0"/>
                            <span>— </span>
                            <p:inputNumber disabled="#{loanApplicationExportInfoBean.isView()}"
                                           value="#{loanApplicationExportInfoBean.$.maxVersionCode}"
                                           styleClass="autoWidthCalendar"
                                           decimalPlaces="0"/>
                        </p:outputPanel>

                        <p:outputLabel value="在线时间"/>
                        <p:outputPanel>
                            <p:calendar disabled="#{loanApplicationExportInfoBean.isView()}"
                                        value="#{loanApplicationExportInfoBean.$.startTime}"
                                        styleClass="autoWidthCalendar"
                                        locale="#{constants:get('LOCALE')}"
                                        timeZone="#{constants:get('TIME_ZONE')}"
                                        pattern="#{constants:get('DATETIME_FORMAT')}"
                                        navigator="true"/>
                            <span>— </span>
                            <p:calendar disabled="#{loanApplicationExportInfoBean.isView()}"
                                        value="#{loanApplicationExportInfoBean.$.endTime}"
                                        styleClass="autoWidthCalendar"
                                        locale="#{constants:get('LOCALE')}"
                                        timeZone="#{constants:get('TIME_ZONE')}"
                                        pattern="#{constants:get('DATETIME_FORMAT')}"
                                        navigator="true"/>
                        </p:outputPanel>

                        <p:outputLabel value="额外信息"/>
                        <p:inputText disabled="#{loanApplicationExportInfoBean.isView()}"
                                     value="#{loanApplicationExportInfoBean.$.extra}"/>

                    </p:panelGrid>
                </div>
            </div>
            <div class="ui-g-12">
                <div class="card ui-g-6">
                    <h3 style="padding-bottom: 0px">图片(点击前)<strong style="color: red">*</strong></h3>
                    <div class="ui-g-12" style="padding-top: 0px">
                        <p:fileUpload fileUploadListener="#{loanApplicationExportInfoBean.onUploadImgBefore}"
                                      mode="advanced"
                                      fileLimit="1"
                                      auto="true" fileLimitMessage="只能上传一个文件" invalidFileMessage="不支持上传文件类型"
                                      invalidSizeMessage="文件过大" sizeLimit="#{constants:get('UPLOAD_FILE_SIZE')}"
                                      allowTypes="/(\.|\/)(#{constants:get('UPLOAD_FILE_SUFFIX')})$/" label="上传"
                                      update="beforeImg"
                                      process="@form" disabled="#{loanApplicationExportInfoBean.isView()}"/>
                        <p:graphicImage id="beforeImg" url="#{loanApplicationExportInfoBean.$.imgurl}" width="100%"/>
                    </div>
                </div>
                <div class="card ui-g-6">
                    <h3 style="padding-bottom: 0px">图片(点击后)</h3>
                    <div class="ui-g-12" style="padding-top: 0px">
                        <p:fileUpload fileUploadListener="#{loanApplicationExportInfoBean.onUploadImgAfter}" mode="advanced"
                                      fileLimit="1"
                                      auto="true" fileLimitMessage="只能上传一个文件" invalidFileMessage="不支持上传文件类型"
                                      invalidSizeMessage="文件过大" sizeLimit="#{constants:get('UPLOAD_FILE_SIZE')}"
                                      allowTypes="/(\.|\/)(#{constants:get('UPLOAD_FILE_SUFFIX')})$/" label="上传"
                                      update="afterImg"
                                      process="@form" disabled="#{loanApplicationExportInfoBean.isView()}"/>
                        <p:graphicImage id="afterImg" url="#{loanApplicationExportInfoBean.$.afClickImgurl}" width="100%"/>
                    </div>
                </div>
            </div>
            <div class="ui-g-12">
                <h:panelGroup id="prods">
                    <div class="card ui-g-12">
                        <h3>上线产品<strong style="color: red">*</strong>
                            <p:commandButton value="全选"
                                             actionListener="#{loanApplicationExportInfoBean.onSelectAllProduct()}"
                                             update="prods"
                                             disabled="#{loanApplicationExportInfoBean.isView()}"/>
                        </h3>
                        <div style="width: 100%">
                            <p:outputPanel>
                                <ui:repeat value="#{loanApplicationExportInfoBean.sortCommProductIds}" var="commprod" varStatus="status">
                                    <div class="ui-g-12">
                                        <strong><h:outputText value="#{commprod.name}" style="color: #007be5;padding-right: 10px"></h:outputText></strong>
                                        <p:commandButton value="全选"
                                                         actionListener="#{loanApplicationExportInfoBean.onSelectSortAllProduct(status.index)}"
                                                         update="sortProds"
                                                         disabled="#{loanApplicationExportInfoBean.isView()}"/>
                                        <p:selectManyButton disabled="#{loanApplicationExportInfoBean.isView()}" value="#{commprod.selectList}" id="sortProds">
                                            <f:selectItems value="#{commprod.list}"
                                                var="product" itemLabel="#{product.name}(#{product.productId})" itemValue="#{product.productId}"/>
                                        </p:selectManyButton>
                                    </div>
                                </ui:repeat>
                            </p:outputPanel>
                        </div>
                        </div>
                </h:panelGroup>
            </div>
            <h:panelGroup id="selectExcludeChannelPanel">
                <div class="ui-g-12">
                    <div class="card ui-g-12">
                        <h3>剔除渠道
                            <p:commandButton value="全选"
                                             actionListener="#{loanApplicationExportInfoBean.onSelectAllExcludeChannel()}"
                                             update="selectExcludeChannelPanel"
                                             disabled="#{loanApplicationExportInfoBean.isView()}"/></h3>
                        <div class="ui-g-12">
                            <p:selectManyButton disabled="#{loanApplicationExportInfoBean.isView()}"
                                                value="#{loanApplicationExportInfoBean.$.selectedExcludeChannels}">
                                <f:selectItems
                                        value="#{loanApplicationExportInfoBean.commProductChannels}"
                                        var="channel"
                                        itemLabel="#{channel.channelName}(#{channel.channelCode})"
                                        itemValue="#{channel.channelCode}"/>
                            </p:selectManyButton>
                        </div>
                    </div>
                </div>
            </h:panelGroup>
        </div>
    </div>
</ui:composition>